<template>
  <div class="page_yz">
  <div class="content_idch">
    <div class="crumbs_bg">
      <div class="container">
        <h1>邀请好友注册，轻松获得交易返佣</h1>
        <h2>当日立享手续费<span></span>返佣福利</h2>
      </div> 
    </div>
    <!-- cont -->
    <div class="container myinvite">
      <div class="invite-total ">
        <div class="codeleft">
        <div class="title" >我的专属分享方式</div>
        <div class="code_content flex">
          <div class="link" >
            <p >注册链接</p> 
          <div class="content-input" >
            <span growing-ignore="true" >{{promData.appurl}}</span> 
            <el-button type="primary" size="mini" class="copy"
              v-clipboard:copy="promData.appurl"
							v-clipboard:success="onCopy"
            >复制</el-button>
          </div>
          </div>
          <div class="code" >
              <p >邀请码</p> 
              <div class="content-input" >
                <span growing-ignore="true" >{{promData.recomcode}}</span> 
                <el-button type="primary" size="mini" class="copy"
                  v-clipboard:copy="promData.recomcode"
                  v-clipboard:success="onCopy"
                  v-text="$t('copy')||'复制'"
                ></el-button>
              </div>
          </div>
        </div>
        <div class="code_icon flex">
          <ul class="flex foot_icon ">
              <li><i class="iconfont icon-facebook"></i></li>
              <li><i class="iconfont icon-twitter"></i></li>
              <li><i class="iconfont icon-medium"></i></li>
              <li><i class="iconfont icon-youtubeplay"></i></li>
              <li><i class="iconfont icon-061coineuro"></i></li>
              <li><i class="iconfont icon-web__bitebi"></i></li>
              <li><i class="iconfont icon-instagram"></i></li>
              <li><i class="iconfont icon-weibo"></i></li>
          </ul>
        </div>
      </div>
      
      <!-- right -->
      <div class="code_right">
        <div growing-ignore="true" class="right" >
          <div class="line" ><div class="block" >
            <div class="label" >邀请总人数</div> 
            <div class="num" >{{promData.direct_people}}</div></div> 
            <!-- <div class="block" >
              <div class="label" >返佣金额(USDT)</div> 
              <div class="num" >0.00000000</div>
            </div> -->
            </div> 
            <div class="line" >
              <!-- <div class="block" ><div class="label" >返佣金额(pts)</div> 
              <div class="num" >0.00000000</div></div> <div class="block" >
                <div class="label" >返佣金额(HT)</div> 
              <div class="num" >0.00000000</div></div> -->
            </div>
        </div>
      </div>
      <!-- right-end -->
    </div>  
    </div>
    <!-- 邀请记录 -->
    <div class="linkrecod">
      <div class="container">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <!-- <el-tab-pane label="邀请记录" name="first">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="wdate"
                  label="时间"
                  width="280">
                </el-table-column>
                <el-table-column
                  prop="member"
                  label="被邀请人账号"
                  width="">
                </el-table-column>
              </el-table>
              
            </template>
          </el-tab-pane> -->
          <el-tab-pane label="邀请记录" name="first">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="member"
                  label="被邀请人账号"
                  width="280">
                </el-table-column>
                <el-table-column
                  prop="wdate"
                  label="时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="indirect_people"
                  label="团队人数"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="direct_people"
                  label="直推人数"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="idcardstate"
                  label="状态">
                </el-table-column>
              </el-table> 
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 邀请规则 -->
    <div class="link_words" style="display:none">
      <div class="container">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>活动细则(仅供参考)</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多细则</el-button>
          </div>
          <div  class="text item">
            <div class="info_cont">
              <p>1、好友接受邀请后，每产生一笔真实交易手续费，会产生相应比例的返佣。</p>
              <p>2、返佣的形式以USDT或点卡或HT的形式返佣到您的交易账户，USDT返佣比例为30%，点卡返佣比例为30%，HT返佣比例为30%。</p>
              <p>3、被邀请人使用点卡交易时，邀请人实际获得的佣金将以等额的点数进行计算后返给邀请人；被邀请人使用HT抵扣手续费时，
                邀请人获得的佣金将以实际发生的手续费进行计算后返给邀请人；
                被邀请人使用非点卡交易且不使用HT抵扣时，邀请人实际获得的佣金将以USDT进行折合计算后返给邀请人。</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      promData:{},
      activeName:'first',
      tableData: [],
      pageData:{
        page:'1',
        limit:'100',
      },
      listDate:{
        // member:"",
        page:"1",
        limit:'100',

      }
    };
  },
  mounted() {
    this.getrecomcode();
    this.getmyrecom();
    this.getteams()
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 设置信息
    getrecomcode(){
      this.request(this.api.getrecomcode).then(res => {
        if (res.code == "0") {
          this.promData = res.data[0];
        }
      });
    },
    getmyrecom(){
      this.request(this.api.getmyrecom,this.pageData).then(res => {
        if (res.code == "0") {
          this.tableData = res.data;
        }
      });
      
    },

    //节点记录
      getteams(){
      this.request(this.api.getteams,this.listDate).then(res => {
        if (res.code == "0") {
          this.listDate = res.data;
        }
      });
      
    },
    onCopy() {
      this.successMsg("label136");
    },
  }
};
</script>

<style lang="scss" scoped>
.content_idch{
  .container{
    margin: 0 auto;
    width: 1200px;
  }
  .crumbs_bg{
    background: url(../../assets/images/user/19f020f.jpg) 0 0 no-repeat;
    height: 430px;
    h1{
      width: 600px;
      font-size: 32px;
      line-height: 40px;
      color: #fff;
      padding-top: 160px;
    }
    h2{
      display: inline-block;
      width: 600px;
      margin-top: 24px;
      font-size: 24px;
      line-height: 32px;
      color: #b0b8db;
      >span{color: #ffc886;}
    }
  }
  // cont-body
  .myinvite {
    margin-top: 30px;
    .invite-total {
        width: 1200px;
        height: 260px;
        border: 1px solid #eaedf0;
        padding: 15px 32px;
        box-sizing: border-box;
        display: flex;
      .title{font-size: 20px;}
      .codeleft{padding-right: 30px;}
      .code_content{
        margin-top: 24px;
        color: #495666;
        .link{width: 540px;}
        p{font-size: 12px;color: #495666;}
      }  
      .content-input {
          position: relative;
          width: 100%;
          height: 40px;
          line-height: 40px;
          border-radius: 2px;
          padding-left: 16px;
          margin-top: 8px;
          border: 1px solid #dfe2e7;
          color: #1c242c;
      }
      .copy{
        position: absolute;
        right: 5px;
        bottom: 5px;
      }
      .code{width: 200px;margin-left: 15px;}
    }
    // right
    .code_right{
        width: 346px;
        padding-left: 22px;
        padding-top: 52px;
        border-left: 1px solid #eaedf0;
      .label {
          margin-bottom: 16px;
          font-size: 12px;
          line-height: 16px;
          color: #495666;
      }
      .line:first-child {
        margin-bottom: 32px;
      }
      .num {
          font-size: 18px;
          font-weight: 500;
          color: #12b886;
      }
      .block {
          width: 140px;
          display: inline-block;
          vertical-align: top;
      }
    }
  }
}
.code_icon{margin-top: 30px;}
.foot_icon{
  margin-top: 15px;
  li{
    margin-right: 15px;cursor: pointer;background:#d3d9e8;padding:5px;border-radius: 15px;
    i{font-size: 14px;color: #357ce1;border-radius: 10px;}
    &:hover{
      background: #357ce1;
      i{color: #ffffff;}
    }
  }
}
//邀请记录
.linkrecod{
  margin: 30px 0;
}
.link_words{
  margin-bottom: 50px;
  .info_cont{
    p{
      color: #596a7a;
      font-size: 12px;
      line-height: 20px;
    }
  }
}
</style>
